<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">

</head>

<body>
    <!-- 头部 -->
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
        <div class="container">
            <a href="#" class="navbar-brand">成为全栈</a>
            <!-- 面包按钮 -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navmenu">
                <ul class="navbar-nav ms-auto"> 
                    <li class="nav-item">
                        <div class="nav-link text-light">首页</div>
                    </li>
                    <li class="nav-item">
                        <div class="nav-link">前端知识</div>
                    </li>
                    <li class="nav-item">
                        <div class="nav-link">后端知识</div>
                    </li>
                    <li class="nav-item">
                        <div class="nav-link">前端知识</div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>


    <!-- 内容部分 -->
    <section class="p-5 bg-dark text-light text-center text-md-start"> 
        <div class="container">
            <div class="d-flex">
                <div class="mt-2">
                    <h1>全栈<span class="text-primary">忆鱼</span></h1>
                    <p class="my-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, corporis
                        iusto consectetur at culpa ex magni velit, voluptatum eos tempore numquam quae. Beatae ex dicta <br>
                        cum laboriosam, quia repudiandae possimus?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur dolorum distinctio ea natus voluptates esse odit blanditiis iusto excepturi itaque quas, quia illum tempore vero sit, praesentium error enim totam! <br>
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis obcaecati consequatur, commodi asperiores ipsa quo quam magni odit, dolorum fuga libero placeat! Dolorum assumenda aliquid minima autem officiis, omnis optio?
                    </p>
                    <button class="btn btn-primary btn-lg">开启编程</button>
                </div>
                <img src="./imgge/1 (1).svg" alt="" class="w-50 d-none d-md-block">
            </div>
        </div>
    </section>

    <!-- 搜索部分 -->
    <section class="p-5 bg-primary text-light">
        <div class="container">
            <div class="d-md-flex justify-content-between align-items-center">
                <h3 class="mb-3">开始编程之旅</h3>
                <div class="input-group register">
                    <input type="text" class="form-control" placeholder="请输入你的邮箱">
                    <button class="btn btn-dark btn-lg">注册</button>
                </div>
            </div>
        </div>
    </section>

    <!--  卡片栅格部分 -->
    <section class="p-5">
        <div class="container">
            <div class="row g-4">
                <div class="col-md">
                    <div class="card bg-dark text-light">
                        <div class="card-body  text-center">
                            <div class="card-title ">
                                前端知识
                            </div>
                            <div class="card-text ">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum provident, fuga
                                temporibus delectus blanditiis ipsam rerum maxime placeat, porro natus obcaecati. Quis,
                                itaque quas eius molestiae temporibus adipisci sint dolorum?
                            </div>
                            <a href="#" class="btn btn-primary mt-2">学习</a>
                        </div>
                    </div>
                </div>

                <div class="col-md">
                    <div class="card bg-secondary text-light">
                        <div class="card-body  text-center">
                            <div class="card-title ">
                                前端知识
                            </div>
                            <div class="card-text ">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum provident, fuga
                                temporibus delectus blanditiis ipsam rerum maxime placeat, porro natus obcaecati. Quis,
                                itaque quas eius molestiae temporibus adipisci sint dolorum?
                            </div>
                            <a href="#" class="btn btn-dark mt-2">学习</a>
                        </div>
                    </div>
                </div>

                <div class="col-md">
                    <div class="card bg-dark text-light">
                        <div class="card-body  text-center">
                            <div class="card-title">
                                前端知识
                            </div>
                            <div class="card-text">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum provident, fuga
                                temporibus delectus blanditiis ipsam rerum maxime placeat, porro natus obcaecati. Quis,
                                itaque quas eius molestiae temporibus adipisci sint dolorum?
                            </div>
                            <a href="#" class="btn btn-primary mt-2">学习</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- 介绍模块 图文左右排 -->
    <section class="p-5">
        <div class="container">
            <div class="row justify-content-between align-items-center">
                <div class="col-md">
                    <img src="./imgge/1 (3).svg" alt="" class="img-fluid">
                </div>
                <div class="col-md p-5">
                    <h2>介绍</h2>
                    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt error facilis
                        doloremque perspiciatis! Rem facilis ipsa officiis iure quae neque laborum ratione, tempora,
                        maiores quas ab. Doloribus in quis asperiores.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis velit dicta necessitatibus
                        accusamus atque perferendis totam, sint voluptates expedita, eaque ullam nam animi rerum
                        voluptate nobis! Amet placeat harum suscipit!</p>
                    <a href="#" class="btn btn-dark">查看更多</a>
                </div>
            </div>
        </div>
    </section>

    <section class="p-5 bg-dark text-light">
        <div class="container">
            <div class="row justify-content-between align-items-center">
                <div class="col-md p-5">
                    <h2>介绍</h2>
                    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt error facilis
                        doloremque perspiciatis! Rem facilis ipsa officiis iure quae neque laborum ratione, tempora,
                        maiores quas ab. Doloribus in quis asperiores.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis velit dicta necessitatibus
                        accusamus atque perferendis totam, sint voluptates expedita, eaque ullam nam animi rerum
                        voluptate nobis! Amet placeat harum suscipit!</p>
                    <a href="#" class="btn btn-light">查看更多</a>
                </div>
                <div class="col-md">
                    <img src="./imgge/1 (6).svg" alt="" class="img-fluid">
                </div>
            </div>
        </div>
    </section>

    <!-- 讲师部分 -->
    <section class="p-5 bg-primary">
        <div class="container">
            <h2 class="text-center text-light">讲师部分</h2>
            <p class="text-center lead text-white mb-5">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam
                natus laborum ratione unde consequuntur suscipit nostrum facere illum similique, neque molestias officia
                error reiciendis quis aut repellat quaerat veritatis molestiae.</p>
            <div class="row g-4">
                <div class="col-lg-3 col-md-6">
                    <div class="card bg-light">
                        <div class="card-body text-center card-user-img">
                            <img src="./imgge/1 (2).svg" class="mb-3" alt="">
                            <h3 class="card-title">忆鱼</h3>
                            <p class="card-text">
                                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Distinctio rem culpa placeat
                                laborum iure atque in consectetur amet quibusdam, quos commodi voluptas dolorum sit
                                veritatis nihil. Possimus unde amet quam.
                                lor
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="card bg-light">
                        <div class="card-body text-center card-user-img">
                            <img src="./imgge/1 (4).svg" class="mb-3" alt="">
                            <h3 class="card-title">忆鱼</h3>
                            <p class="card-text">
                                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Distinctio rem culpa placeat
                                laborum iure atque in consectetur amet quibusdam, quos commodi voluptas dolorum sit
                                veritatis nihil. Possimus unde amet quam.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="card bg-light">
                        <div class="card-body text-center card-user-img">
                            <img src="./imgge/1 (5).svg" class="mb-3" alt="">
                            <h3 class="card-title">忆鱼</h3>
                            <p class="card-text">
                                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Distinctio rem culpa placeat
                                laborum iure atque in consectetur amet quibusdam, quos commodi voluptas dolorum sit
                                veritatis nihil. Possimus unde amet quam.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="card bg-light">
                        <div class="card-body text-center card-user-img">
                            <img src="./imgge/1 (7).svg" class="mb-3" alt="">
                            <h3 class="card-title">忆鱼</h3>
                            <p class="card-text">
                                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Distinctio rem culpa placeat
                                laborum iure atque in consectetur amet quibusdam, quos commodi voluptas dolorum sit
                                veritatis nihil. Possimus unde amet quam.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系部分 -->
    <section class="p-5">
        <div class="container">
            <h2 class="text-center mb-4">联系我们</h2>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">电话：130XXXXXX</li>
                <li class="list-group-item"><a
                        href="https://www.bilibili.com/video/BV1mx4y1d7XS/?share_source=copy_web&vd_source=75955d89155a9427f6a0afc4ff3fb869">邮箱：
                        bilibil@bili.com</a></li>
                <li class="list-group-item">源码公众号：好奇前端的忆鱼</li>
            </ul>
        </div>
    </section>

    <!-- 底部部分 -->
    <footer class="p-5 bg-dark text-white text-center">
        <div class="container">
            <p class="lead">成为 &copy; 全栈</p>
        </div>
    </footer>

    <!-- 返回顶部 -->
    <button onclick="topFunction()" id="backToTop"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-arrow-up-circle-fill " viewBox="0 0 16 16">
        <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z"/>
      </svg></button>

    <!-- 返回顶部 -->
    <script src="./js/BackTop.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>